<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>促销管理</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <!-- <script src="../../javaScript/renYuanShuJu.js"></script> -->
    <!-- <script src="../../javaScript/fenYe.js"></script> -->
    <!-- <script src="../../javaScript/accountDetails.js"></script> -->
    <script src="../../javaScript/cuxiaoguanli/shuju.js"></script>
    <style>
    body {
        background-color: #F2F2F2;
        width: 1518.4px;
    }
    .clear::after{
        content: '';
        display: block;
        clear: both;
    }
    .container {
        width: 100%;
        line-height: 80px;
        background-color: white;
        border-radius: 2px;
        margin-top: 10px;
    }
    
    .nav_header {
        height: 80px;
    }
    
    .content_right {
        text-align: right;
    }
    
    .drop_down {
        width: 105px;
        height: 40px;
        outline: none;
    }
    .drop_down1{
        width: 205px;
        height: 40px;
        outline: none;
    }
    #sTime{
        text-align: center;
    }
    .drop_time{
        width: 85px;
        height: 40px;
        /* margin-top: 20px; */
        margin-left: 20px;
        /* text-align: center; */
        /* border: 0; */
        /* appearance:none; */
        outline: none;
    }
    .sousuo,
    .chongzhi {
        width: 85px;
        height: 40px;
        line-height: 36px;
        padding: 0;
        border: 0;
        border-radius: 2px;
    }
    
    .sousuo {
        /* 搜索按钮 */
        background-color: #49A2E8;
        color: white;
    }
    
    .chongzhi {
        /* 重置按钮 */
        color: #666666;
    }
    
    .shanchu,
    .xinzeng {
        width: 80px;
        height: 35px;
        line-height: 33px;
        padding: 0;
        border: 0;
        border-radius: 2px;
    }
    
    .shanchu {
        /* 删除按钮 */
        color: #666666;
        border: rgb(204, 204, 204) 1px solid;
        background-color: white;
    }
    
    .xinzeng {
        /* 新增按钮 */
        color: #49A2E8;
        border: #49A2E8 1px solid;
    }
    
    .table_row span {
        display: inline-block;
        margin-right: 10px;
    }
    
    .table_row span:hover {
        color: #49A2E8;
        cursor: pointer;
    }
    
    .table_page {
        height: 74px;
        line-height: 74px;
    }
    
    .table_page>nav,
    .page_num {
        height: 74px;
        line-height: 74px;
    }
    
    .page_num {
        padding: 20px;
    }
    
    .page_num>ul {
        height: 34px;
        border-radius: 2px;
        padding: 0;
        overflow: hidden;
        transition: all 0.3s linear;
    }
    
    .page_num>ul:hover {
        height: 136px;
    }
    
    .page_num>ul>li {
        list-style: none;
        padding: 0 0px;
        height: 34px;
        line-height: 34px;
        background-color: #F2F2F2;
    }
</style>
</head>
<body>
    <!-- 模态框区域 -->
    <div id="motaikuang"></div>
    
    <!-- 头部搜索区 -->
    <div class="container nav_header">
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-2 col-xs-2">
                        当前状态
                        <select class="drop_down" id="zt">
                            <option value="">请选择当前状态</option>
                            <option value="s">启用</option>
                            <option value="s">禁用</option>
                        </select>
                    </div>
                    <div class="col-md-1 col-xs-1">
                        <label id="sTime">
                            <select class="drop_time" id="time">
                                <option value="s">上架时间</option>
                                <option value="s">下架时间</option>
                            </select>
                        </label>
                    </div>

                    <div class="col-md-3 col-xs-3 clear" style="margin-left: 0px;margin-top:5px;height: 85px;">   
                        <input type="date" id="sjTime" class="form-control input_text" placeholder="开始日期" aria-describedby="basic-addon2" style="width: 45%;margin-top: 20px;float: left;">
                        <input type="date" id="xjTime" class="form-control input_text" placeholder="结束日期" aria-describedby="basic-addon2" style="width: 45%;margin-top: 20px;float: left;">
                        
                    </div>
                    <!-- <div class="col-md-2 col-xs-2">
                        <input type="date" class="form-control input_text" placeholder="结束日期" aria-describedby="basic-addon2" style="width: 90%;">
                    </div> -->
                    <div class="col-md-3 col-xs-3">
                        活动名称
                        <input type="text" placeholder="活动名称" id="hdName" class="drop_down1" value="">
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-xs-2 content_right">
                <button class="sousuo"><span class="iconfont icon-sousuo"></span>搜索</button>
                <button class="chongzhi"><span class="iconfont icon-zhongzhizhongzhi"></span>重置</button>
            </div>
        </div>
    </div>

    <!-- 中部列表区 -->
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-1 col-xs-1">
                        <span class="iconfont icon-shujukuliebiao"></span>数据列表
                    </div>
                    <div class="col-md-1 col-xs-1">
                        <button class="shanchu"><span class="iconfont icon-shanchu"></span>删除</button>
                    </div>
                </div>
            </div>
            <div class="col-md-2 content_right"> <button class="xinzeng"><span>+ </span>新增</button></div>
        </div>
        <table class="table table-striped table-hover" id="mytable">
            <thead>
                <tr class="table_row">
                    <th>
                        <input type="checkbox" class="quanxuan" value="">
                    </th>
                    <th>序号</th>
                    <th>活动名称</th>
                    <th>上架时间</th>
                    <th>下架时间</th>
                    <th>商品数量</th>
                    <th>当前状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="table_row table_content">

            </tbody>
        </table>
        <div class="row table_page">
            <div class="col-md-9 col-xs-9">
                <input type="checkbox" class="quanxuan" value="">&nbsp&nbsp全选
            </div>
            <nav aria-label="Page navigation" class="col-md-2 col-xs-2">
                <ul class="pagination" id="pages">
                    <li id="pre">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <!-- <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li> -->
                    <li id="next">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="col-md-1 col-xs-1 page_num">
                <ul>
                    <!-- <li>
                        <select name="" id="page_num" style="width:100%;height:100%;">
                            <option value="10">10条/页</option>
                            <option value="15">15条/页</option>
                            <option value="20">20条/页</option>
                            <option value="25">25条/页</option>
                        </select>
                    </li> -->
                    <li value="10" >10条/页<span class="iconfont icon-arrow-down"></span></li>
                    <li value="15">15条/页</li>
                    <li value="20">20条/页</li>
                    <li value="25">25条/页</li>
                </ul>
            </div>
        </div>
    </div>


    <script>
        //数据倒入容器中
        var fenyeData = huodongData
        //每一页的数据数
        var beilv = 10
        //当前页数
        let dangqianPage = 0
        //最大页数
        let maxPage
        //设置初始页数
        let chushi = 1

        // $('#page_num option:selected').val()
        // if($('#page_num option:selected').val() == "10"){
        //     beilv = 10
        //     show(chushi)
        // }else if($('#page_num option:selected').val() == "15"){
        //     beilv = 15
        //     show(chushi)
        // }else if($('#page_num option:selected').val() == "20"){
        //     beilv = 20
        //     show(chushi)
        // }else if($('#page_num option:selected').val() == "25"){
        //     beilv = 25
        //     show(chushi)
        // }
        // console.log($('#page_num option:selected').val())
        // $('#page_num option:selected').text()
        // console.log($('#page_num option:selected').text())
      
        //插入每一页的数据
        function showTable(data) {
            $('.table_content').html('')
            $('#motaikuang').html('')
            //模态框的id 要和唤起模态框的 按钮的data-target或者href的 内容一样
            $.each(data,function (index,item) {
                $('#motaikuang').append(`  
                    <div class="modal fade" tabindex="-1" role="dialog" id="shanchu_table${item.num}">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">是否要确认删除${item.huodongName}的数据</h4>
                                    </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                `)


                $('.table_content').append(`
                    <tr>
                        <th>
                            <input type="checkbox" id="" value="${item.num}" name="check_table">
                        </th>
                        <td>${item.num}</td>
                        <td>${item.huodongName}</td>
                        <td>${item.shangjiaTime}</td>
                        <td>${item.xiajiaTime}</td>
                        <td>${item.shangpinNum}</td>
                        <td>${item.zhuangtai}</td>
                        <td>
                            <span class="shanchu_table del" type="button" data-toggle="modal" data-target="#shanchu_table${item.num}">删除</span>
                            <span class="bianji">编辑</span><span class="shezhishangpin">设置商品</span></td>
                    </tr>
                `)
            })
        }
        // showTable()

        let checkedBoole
        //分页
        function fengye(num,data){
            for (let i = 0; i < $('.page').length; i++) {
                $('.page').eq(i).removeClass('active')
            }
            $('.page').eq(num-1).addClass('active')
            let jishu = (num-1)*beilv
            let arr = data.slice(jishu,jishu+beilv)
            // console.log(num)
            dangqianPage = num
            //根据第几页加载第几页的表格数据
            showTable(arr)

            $('.quanxuan').click(function() { //全选按钮
                if ($(this).prop('checked') == true) {
                    $(".table_content input").prop("checked", true)
                } else {
                    $(".table_content input").prop("checked", false)
                }
            })
            $('.table_content input').click(function() { //获取checked是否为选中
                if ($(this).prop('checked') == true) { //选中的时候执行这个结果
                    $('.shanchu').click(function() {
                        console.log($("input[checked='true']"));
                    })
                } else { //未选中的时候执行这个结果
                    checkedBoole = $(this).prop('checked')
                    $('.shanchu').click(function() {})
                }
            })
        }

        //有几页就插入几页页码
        function showPage(data){
            $('#pages').html('')
            maxPage= Math.ceil(data.length/beilv)
            // console.log(maxPage)
            $('#pages').append(`
            <li id="pre">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
            `)
            for(let i=1;i<=maxPage;i++){
                $('#pages').append(`
                <li class="page"><a href="#">${i}</a></li>
                `)
            }
            $('#pages').append(`
            <li id="next">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
            `)
        }

        show(chushi)
        //加载并展示
        function show(num) {
            showPage(fenyeData)
            fengye(num,fenyeData)
            // showPage(fenyeData)
        }

        //点击页码
        $('#pages').on('click','.page',function () {
        let num = $(this).text()
        // $('#pages').find('.page').addClass('active')
        // $(this).css("background","red")
        dangqianPage = num
        // console.log(dangqianPage)
        // fengye(num, fenyeData)
        show(num)
    })
    
    //上一页
    $('#pages').on('click','#pre',function () {
        if(dangqianPage != 1){
            dangqianPage = parseInt(dangqianPage) - 1
            // console.log(dangqianPage)
            fengye(dangqianPage, fenyeData)
        }
    })
    
     //下一页
     $('#pages').on('click','#next',function () {
        if(dangqianPage != maxPage){
            // console.log(dangqianPage)
            // console.log(maxPage)
            dangqianPage = parseInt(dangqianPage) + 1
            // console.log(dangqianPage)
            fengye(dangqianPage, fenyeData)
        }
     })

     $('.chongzhi').on('click',function () {
        fenyeData = huodongData
        show(1)
    })

     //匹配查询
     $('.sousuo').on('click',function () {
        //先获取查询区域中的数据
        let ztVal = $("#zt option:selected").text()
        let timeVal = $ ("#time option:selected").text()
        let sjTimeVal = $("#sjTime").val()
        let xjTimeVal = $("#xjTime").val()
        let hdNameVal = $("#hdName").val()
        // num: "010",//序号
        // huodongName: "打地鼠0",//活动名称
        // shangjiaTime:"2021-12-24 9:16:00",//上架时间
        // xiajiaTime: "2021-12-24 9:16:00",//下架时间
        // shangpinNum:"100",
        // zhuangtai:"启用"
        console.log(hdNameVal)
        let chaxunArr = []
        let tishi = 0
        //判断状态为启用还是禁用
        if(ztVal =='启用' || ztVal =='禁用'){
            chaxunArr = huodongData.filter(function(item){
                return item.zhuangtai==ztVal
            })
            tishi = 1
        }

        //判断是上架时间还是下架时间
        if(timeVal =='上架时间'){
            //上架时间
        if(sjTimeVal != ''){
            if(chaxunArr.length >0 || tishi == 1){
                chaxunArr = chaxunArr.filter(function (item) {
                    return item.shangjiaTime == sjTimeVal
                })
            }else{ //id为空时
                chaxunArr = huodongData.filter(function (item) {
                    return item.shangjiaTime == sjTimeVal
                })
                tishi = 1
            }
        }
        }else if(timeVal =='下架时间'){
            //下架时间
        if(xjTimeVal != ''){
            if(chaxunArr.length >0 || tishi == 1){
                chaxunArr = chaxunArr.filter(function (item) {
                    return item.xiajiaTime == xjTimeVal
                })
            }else{ //id和name为空时
                chaxunArr = huodongData.filter(function (item) {
                    return item.xiajiaTime == xjTimeVal
                })
                tishi = 1
            }
        }
        }
        
        //活动名称
        if(hdNameVal != ''){
            if(chaxunArr.length >0 || tishi == 1){
                chaxunArr = chaxunArr.filter(function (item) {
                    return item.huodongName == hdNameVal
                })
            }else(    //id、name和sex为空时 
            chaxunArr = huodongData.filter(function (item) {
                    return item.huodongName == hdNameVal
                })
            )
        }
        console.log(chaxunArr)
        fenyeData = chaxunArr
        let num = Math.ceil(fenyeData.length/beilv)
        show(chushi)
    })

    
    //删除本行(要删除数组中的数据)
    // $('#mytable tbody').on('click','.del',function () {
    //     $(this).parent().parent().remove()
    //     for(let i=0;i< huodongData.length;i++){
    //         if( huodongData[i].num == $(this).parent().parent().find('td:nth-child(2)').text()){
    //             huodongData.splice(i,1)
    //             fenyeData = huodongData
    //             show(1)
    //             break;
    //         }
    //     }
    // })
    let del_table    //设置指代的变量
    $('#mytable tbody').on('click','.del',function (){
        del_table = $(this)
    })
    $('#motaikuang').on('click', '.btn-primary', function() {
        del_table.parent().parent().remove()
        for(let i=0;i< huodongData.length;i++){
            if( huodongData[i].num == del_table.parent().parent().find('td:nth-child(2)').text()){
                huodongData.splice(i,1)
                fenyeData = huodongData
                show(dangqianPage)
                // $('.fade').css({ display: 'none' })
                break;
            }
        }
        $(this).parent().parent().parent().parent().remove()
        $('.fade').css({ display: 'none' })
    })



    //批量删除
    $('.shanchu').click(function() {
        if (confirm('是否确定删除？')) {
            $("input[name='check_table']:checked").each(function() { // 遍历选中的checkbox
                let n = $(this).parents("tr").index(); // 获取checkbox所在行的顺序
                let m = parseInt($(".table_content").find("tr:eq(" + n + ")").children().eq(1).text()) //所在行的id值
                console.log(m)
                console.log(n)
                $(".table_content").find("tr:eq(" + n + ")").remove();
                for (let i = 0; i < huodongData.length; i++) {
                    if (m == fenyeData[i].num) {
                        console.log(fenyeData[i].num)
                        console.log(huodongData[i].num)
                        fenyeData.splice(i, 1)
                        i--
                        // fenyeData = huodongData
                        break
                    }
                }
            });
            show(dangqianPage)
            // fengye(num, huodongData)
            // showPage(huodongData)
            alert('删除成功')
        }
    })


    //新增
    $('.xinzeng').on('click',function () {
        location.href = './xinzengxianshigou.html'
    })
    
    //编辑
    $('#mytable tbody').on('click','.bianji',function () {
        let numVal = $(this).parent().parent().find('td:nth-child(2)').text()
        let huodongNameVal = $(this).parent().parent().find('td:nth-child(3)').text()
        let sjTimeVal = $(this).parent().parent().find('td:nth-child(4)').text()
        let xjTimeVal = $(this).parent().parent().find('td:nth-child(5)').text()
        console.log(numVal)
        console.log(huodongNameVal)
        console.log(sjTimeVal)
        console.log(xjTimeVal)
        for(let i = 0 ; i < huodongData.length; i++){
            if (numVal == huodongData[i].num && huodongNameVal == huodongData[i].huodongName && sjTimeVal == huodongData[i].shangjiaTime && xjTimeVal == huodongData[i].xiajiaTime) {
                let str = JSON.stringify(huodongData[i])
                sessionStorage.setItem('xianshigou', str)
                location.href = './bianjixianshigou.html'
                // huodongData[i]
                break
            }
        }
        // location.href = './bianjixianshigou.html'
    })
    
    //设置商品
    $('#mytable tbody').on('click','.shezhishangpin',function () {
        location.href = './shezhishangping.html'
    })
    </script>
</body>
</html>